<template>
  <div class="overflow-y-scroll">
    <div class="flex mt-2">
      <canvas id="sign-canvas" class="bg-slate-100 rounded"></canvas>
    </div>
    <div class="mt-2">
      <a-button @click="eSign?.undo()" class="mr-2">
        <Icon icon="eva:undo-outline" />
      </a-button>
      <a-button @click="eSign?.clear()" class="mr-2">
        <Icon icon="eva:close-fill" />
      </a-button>
      <a-button @click="handleToImg">
        <Icon icon="eva:code-download-fill" />
      </a-button>
    </div>
    <img class="" v-if="resultImg" :src="resultImg" />
  </div>
</template>

<script lang="ts" setup>
import signName from 'smooth-signature'

const eSign = ref<InstanceType<typeof signName>>()
const resultImg = ref()

onMounted(() => {
  const canvas = document.querySelector('#sign-canvas') as HTMLCanvasElement
  eSign.value = new signName(canvas, {
    height: 160, // 实际渲染高度\宽度
    width: 384, // 实际渲染高度\宽度
    scale: 2,
    openSmooth: true,
  })
})

function handleToImg() {
  if (eSign.value?.isEmpty()) {
    gsap.to('#sign-canvas', {
      backgroundColor: '#F5D1CE',
      duration: 0.1,
      repeat: 5,
      yoyo: true,
    })
  } else {
    resultImg.value = eSign.value?.getPNG()
  }
}
</script>
